<!--
 * @Author: MarsLay 331412466@qq.com
 * @Date: 2024-01-15 09:50:16
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-01-15 15:15:11
 * @FilePath: \ticket-center\src\pages\common\toLogin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main">
    <div class="title">出售出站票</div>
    <div class="price">
      <div class="txt">出售出站票面值：</div>
      <div class="num">￥{{ price }}.00元</div>
    </div>
    <div @click="back" class="button">退出(E)</div>
    <div class="tip">请将票卡放置在读写器上</div>
  </div>
</template>

<script>
export default {
  name: "toOutbound",
  data() {
    return {
      price: ''
    }
  },
  computed: {},
  mounted() {
    this.price = this.$route.query.price;
  },
  methods: {
    back() {
      this.$router.push('/efo');
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  position: relative;
}

.tip {
  position: absolute;
  bottom: 50px;
  left: 10%;
  font-size: 16px;
  color: #ff0000;
}

.title {
  margin: 100px auto;
  font-size: 32px;
  color: #ff0000;
}

.price {
  .flex(row, flex-end);
  padding: 0 30px;
  width: 70%;
  height: 60px;
  background-color: #87bbf4;

  .txt {
    color: #1f9900;
  }

  .num {
    padding: 5px 30px 5px 10px;
    color: #000000;
    background-color: #c0fec0;
  }
}

.button {
  position: absolute;
  bottom: 5%;
  right: 15%;
  .flex(row, center);
  margin: 30px auto;
  width: 120px;
  height: 40px;
  font-size: 24px;
  color: #000000;
  background-color: #c0c0c0;
  box-shadow: 2px 2px 2px 0 #000000;
  cursor: pointer;
}
</style>